<template>
  <div class="singer">
    <SingerItem
      v-for="item in artists"
      :key="item.id"
      :item="item"
      @click.native="toSingerDetail(item.id)"
    />
  </div>
</template>

<script>
import SingerItem from "@/components/basics/SingerItem.vue";
export default {
  components: { SingerItem },
  name: "singer",
  async created() {
    // 搜索关键字歌手结果页
    const { keywords } = this;
    const res = await this.axios.get(
      `/cloudsearch?keywords=${keywords}&type=100`
    );
    this.artists = res.data.result.artists;
  },
  props: {
    keywords: String,
  },
  data() {
    return {
      artists: [],
    };
  },
  methods: {
    // 点击进入歌手详情
    toSingerDetail(id) {
      this.$router.push({ path: "/singer_detail", query: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
</style>